import {HmiComponent} from "../../hmi";

export let SvgComponent: HmiComponent = {
  id: "svg",
  name: "SVG",
  icon: "/assets/hmi/svg.svg",
  group: "控件",

  color: true,

  properties: [
    {
      label: 'SVG PATH',
      name: 'path',
      type: 'textarea',
      default: 'M935.2 405.6c-16.700000000000045 17.299999999999955-32.90000000000009 34.599999999999966-49.80000000000007 51.19999999999999-45.39999999999998 44.69999999999999-91.29999999999995 88.99999999999994-137 133.40000000000003-7.199999999999932 7-14.899999999999977 13.699999999999932-21.5 21.399999999999977-2.6000000000000227 3.1000000000000227-4.2999999999999545 8.600000000000023-3.6000000000000227 12.5 16.600000000000023 98.69999999999993 33.5 197.29999999999995 50.40000000000009 296 0.09999999999990905 0.39999999999997726 0 0.8999999999999773-0.10000000000002274 1.6000000000000227-0.20000000000004547 0.8999999999999773-4.399999999999977-0.6000000000000227-9.5-3.300000000000068-17.700000000000045-9.199999999999932-35.10000000000002-18.299999999999955-52.5-27.5-68.89999999999998-36.19999999999993-137.89999999999998-72.39999999999998-206.60000000000002-108.89999999999998-6-3.2000000000000455-10.100000000000023-1.7000000000000455-15.300000000000011 1-86.09999999999997 45.39999999999998-172.2 90.70000000000005-258.4 136-1.5 0.7999999999999545-3 1.5-4.600000000000023 2.2000000000000455-2.5999999999999943 1.1999999999999318-3.8999999999999773-2.5-2.8999999999999773-8.200000000000045 3.8999999999999773-23.299999999999955 7.599999999999994-46 11.5-68.60000000000002 12.699999999999989-74 25.69999999999999-147.89999999999998 38.099999999999966-221.89999999999998 0.6000000000000227-3.5-1.8999999999999773-8.700000000000045-4.599999999999966-11.399999999999977-44.70000000000002-44-90-87.30000000000007-134.3-131.70000000000005-24.200000000000003-24.299999999999955-47.2-49.799999999999955-69.8-74.09999999999997-3.9000000000000057-4.199999999999989-2.5-8.300000000000011 3.200000000000003-9.199999999999989 11.899999999999991-1.8000000000000114 25.69999999999999-3.900000000000034 39.599999999999994-5.900000000000034 60.5-8.800000000000011 121.1-17.599999999999966 181.60000000000002-26.5 20.299999999999955-3 40.5-6.5 60.89999999999998-8.599999999999966 7.699999999999989-0.8000000000000114 11.399999999999977-4 14.600000000000023-10.600000000000023 42.19999999999999-86.10000000000002 84.69999999999999-172.1 127.09999999999997-258.1 0.9000000000000341-1.8999999999999773 1.900000000000034-3.6999999999999744 3-5.699999999999974 1.6999999999999886-3.1000000000000085 4.300000000000011-3.700000000000003 5.900000000000034-1.1000000000000085 1 1.6000000000000085 1.8999999999999773 3.1000000000000085 2.6999999999999886 4.700000000000003 42.900000000000034 86.89999999999999 85.90000000000003 173.8 128.59999999999997 260.9 3.1000000000000227 6.300000000000011 6.600000000000023 9 13.800000000000068 10 88.79999999999995 12.699999999999989 177.5 25.80000000000001 266.29999999999995 38.80000000000001 6.7000000000000455 1 13.399999999999977 1.8999999999999773 20.100000000000023 2.8000000000000114 5.699999999999932 0.5999999999999659 7.100000000000023 4.599999999999966 3.1000000000000227 8.800000000000011z'
    },
  ],

  create() {
    //@ts-ignore
    this.element = this.$container.nested().attr("preserveAspectRatio", "xMidYMid meet")
    //@ts-ignore
    this.path = this.element.path(this.$properties.path)
      .fill("#FFFFFF")
    //@ts-ignore
    this.element.viewbox(this.path.bbox())
  },

  setup(props: any): void {
    //@ts-ignore
    let p = this.$properties
    if (props.hasOwnProperty("width") || props.hasOwnProperty("height"))//@ts-ignore
      this.element.size(p.width, p.height)
    if (props.hasOwnProperty("fill"))//@ts-ignore
      this.path.fill(p.fill)
    if (props.hasOwnProperty("x") || props.hasOwnProperty("y"))//@ts-ignore
      this.element.move(p.x, p.y)
    if (props.hasOwnProperty("path")) {//@ts-ignore
      this.path.plot(p.path)
      //@ts-ignore
      this.element.viewbox(this.path.bbox())
    }
  },

}
